<template>
    <div class="main-view">
        <h1 class="header" :style="{
            backgroundImage: 'url(../office.jpeg)'
        }">
            h5office
            <div class="tips">提供H5版本的自动化办公常用处理方法</div>
            <div class="about" @click="openApplication('what')">
                关于我们
            </div>
        </h1>
        <div class="content">
            <div class="block">
                <h2>PDF 相关</h2>
                <ul>
                    <li class="img">
                        <a target="_blank" href="./Image-to-PDF/index.html"> 图片转PDF </a>
                    </li>
                    <li class="img">
                        <a target="_blank" href="./PDF-to-Image/index.html"> PDF转图片 </a>
                    </li>
                </ul>
            </div>
        </div>
        <footer class="foot">
            本项目由
            <a class="heart" href="https://zxl20070701.github.io/notebook/home.html" target="_blank">
                z Z ...
            </a>
            维护

            <div class="right">
                <a href="https://github.com/LL-Store/h5office" target="_blank">查看源码</a>
                <a href="https://github.com/LL-Store/h5office/issues" target="_blank">联系我们</a>
                <span>
                    邮箱：<a :href="emailUrl" target="_blank">1904314465@qq.com</a>
                </span>
            </div>
        </footer>
    </div>
    <div class="dialog-view">
        <!-- 统一遮罩 -->
        <div class="mask"></div>
        <ui-dialogs v-for="(dialog, index) in dialogStore.fetchList"
            :dialog="dialogs[dialog.id as keyof typeof dialogs]" :data="dialog.data" :key="index"></ui-dialogs>
    </div>
</template>
<script setup lang="ts">
import { useDialogStore } from "@/common/stores/dialog"
import uiDialogs from "@/common/components/dialogs.vue"
import dialogs from "./dialogs/lazy-load"

let dialogStore = useDialogStore()

// 打开应用方法
let openApplication = (appName: string) => {
    window.location.href = "#/" + appName
    dialogStore.openDialog({
        id: appName,
        callback() {
            window.location.href = "#/"
        }
    })
}

// 是否需要默认打开
let appName = window.location.hash.replace(/^#\/?/, '')
if (appName && dialogs[appName as keyof typeof dialogs]) {
    openApplication(appName)
}

let emailBody = `你好：

使用 h5office 过程中，我遇到了一些问题，希望获得帮助，具体如下：

1、问题描述
（描述一下你的问题）

2、截图
（对帮助你或者描述清楚问题有用的截图，可以多张）

3、期望
（你期望的结果或获得怎么样的帮助）

4、更多
（需要补充的，如果没有可以空着）

--------------------------------------------------------------------------------------------------------------

邮件创建时间：${new Date()}

`
let emailUrl: string = `mailto:1904314465@qq.com?subject=${encodeURIComponent(
    "h5office 期望获得帮助"
)}&body=${encodeURIComponent(emailBody)}`

</script>
<style lang="scss" scoped>
.main-view {
    .header {
        line-height: 60px;
        border-bottom: 1px solid rgb(232, 232, 232);
        background-repeat: no-repeat;
        background-size: auto 90%;
        background-position: 20px center;
        padding-left: 90px;
        white-space: nowrap;

        &>.tips {
            display: inline-block;
            font-size: 14px;
            vertical-align: bottom;
            font-weight: 400;
            color: gray;
        }

        &>.about {
            white-space: nowrap;
            position: fixed;
            right: 0;
            top: 10px;
            line-height: 30px;
            background-color: #000000;
            color: white;
            padding: 5px 10px;
            font-size: 14px;
            border-radius: 5px 0 0 5px;
            cursor: pointer;
        }
    }

    .content {
        min-height: calc(100vh - 112px);
        padding: 10px;

        &>.block {
            display: inline-block;
            width: 230px;
            vertical-align: top;
            margin: 10px;

            &>h2 {
                color: rgb(117, 117, 117);
                font-size: 16px;
                padding-left: 10px;
                line-height: 2.4em;
                font-weight: 200;
            }

            &>ul {
                &>li {
                    line-height: 40px;
                    background-repeat: no-repeat;
                    background-position: 8px center;
                    background-size: auto 24px;
                    padding-left: 40px;
                    color: black;

                    &>a {
                        color: inherit;
                    }

                    &>a,
                    span {
                        &:hover {
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }

                    &.img {
                        background-image: url("./images/img.svg");
                    }
                }
            }
        }
    }

    .foot {
        background-color: rgb(244, 244, 244);
        padding: 0 20px;
        line-height: 50px;
        color: rgb(26, 26, 26);
        font-size: 14px;

        .right {
            float: right;
        }

        a {
            color: inherit;
            margin-right: 20px;
            text-decoration: underline;
            font-weight: 800;

            &.heart {
                background-image: url("./images/heart.svg");
                background-repeat: no-repeat;
                padding-left: 30px;
            }
        }
    }
}

.dialog-view {
    &>.mask {
        background-color: rgb(0 0 0 / 30%);
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        display: none;

        &:not(:last-child) {
            display: block;
        }
    }
}
</style>